<template>
  <div class="user">
    <div class="user-style-body">
      <el-table :data="userDate" style="width: 100%" height="156px"
                v-loading = "pictLoading"
                element-loading-text = "数据正在加载中"
                element-loading-spinner = "el-icon-loading"
                stripe :header-cell-style="{background:'#1C7CD5',color:'#fff'}">
        <el-table-column prop="name" label="姓名" width="170" height="20"></el-table-column>
        <el-table-column
          prop="role"
          label="角色"
          width="70" height="20">
          <template slot-scope="scope">
            <span v-if="scope.row.role==1">技工</span>
            <span v-if="scope.row.role==2">安全员</span>
            <span v-if="scope.row.role==3">监理</span>
            <span v-if="scope.row.role==4">(负责人)</span>
            <span v-if="scope.row.role==5">(班长)</span>
            <span v-if="scope.row.role==6">(作业人员)</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="班组"
          width="70" height="20">
          <template slot-scope="scope">
            一组
          </template>
        </el-table-column>
        <el-table-column
          prop="temp"
          label="体温"
          width="80">
          <template slot-scope="scope">
            {{(scope.row.temp == null||scope.row.temp==0)?'-':scope.row.temp}}
          </template>
        </el-table-column>
        <el-table-column
          prop="pulse"
          width="60"
          label="心跳">
          <template slot-scope="scope">
            {{(scope.row.pulse == null||scope.row.pulse==0)?'-':scope.row.pulse}}
          </template>
        </el-table-column>
        <el-table-column
          label="血压"
          width="70">
          <template slot-scope="scope">
            {{(scope.row.systolic == null||scope.row.systolic == 0)?'-':scope.row.systolic}}/{{(scope.row.diastolic == null||scope.row.diastolic == 0)?'-':scope.row.diastolic}}
          </template>
        </el-table-column>
        <el-table-column prop="temp" label="最后体征时间" width="140">
          <template slot-scope="scope">
            <span disable-transitions v-if="scope.row.tempLastTime!=null">{{scope.row.tempLastTime | timestampToDate1}}</span>
            <span disable-transitions v-if="scope.row.tempLastTime==null">-</span>
          </template>
        </el-table-column>
        <el-table-column
          label="安全绳"
          width="70">
          <template slot-scope="scope">
            -
          </template>
        </el-table-column>
        <el-table-column
          label="高挂低用"
          width="70">
          <template slot-scope="scope">
            -
          </template>
        </el-table-column>
        <el-table-column
          prop="maoState"
          width="70"
          label="安全帽">
          <template slot-scope="scope">
            <span v-if="scope.row.maoState==1" style="color: #ff0000">未佩戴</span>
            <span v-else-if="scope.row.maoState==2">已佩戴</span>
            <span v-else>未绑定</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="warringList"
          width="80"
          label="SOS/跌落">
          <template slot-scope="scope">
            <span v-if="has(scope.row.warringList,6)" style="color: #FF580E">SOS</span>
            <span v-else-if="has(scope.row.warringList,7)" style="color: #FF580E">跌落</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="maoWorking"
          width="80"
          label="定位">
          <template slot-scope="scope">
                  <span v-if="scope.row.warringList!=null && (has(scope.row.warringList,1)|| has(scope.row.warringList,2))" style="color: #FF580E">
                  {{scope.row.warringList | hasWl}}
                  </span>
            <span v-else>
                  <span v-if="scope.row.maoWorking==1" style="color: #24BE5A">在线</span>
                  <span v-if="scope.row.maoWorking==2" style="color: #FF580E ;">离线</span>
                  <span v-if="scope.row.maoWorking==null" style="color: #495057">未定位</span>
                  </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="lon2"
          label="经度"
          width="90">
          <template slot-scope="scope">
            {{(scope.row.lon2==null||scope.row.lon2==0)?'-':Number(scope.row.lon2).toFixed(6)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="lat2"
          label="纬度"
          width="80">
          <template slot-scope="scope">
            {{(scope.row.lat2==null||scope.row.lat2==0)?'-':Number(scope.row.lat2).toFixed(6)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="alt"
          label="高度"
          width="80">
          <template slot-scope="scope">
            {{(scope.row.alt==null || scope.row.alt==0)?'-':Number(scope.row.alt).toFixed(2)}}
          </template>
        </el-table-column>
        <el-table-column
          prop="recordTime"
          width="140"
          label="最后定位时间">
          <template slot-scope="scope">
            <span disable-transitions v-if="scope.row.maoLastTime!=null">{{scope.row.recordTime | timestampToDate1}}</span>
            <span disable-transitions v-if="scope.row.maoLastTime==null">未定位</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>

</template>

<script>
export default {
  inject:['reload'],
  name: "User",
  data(){
    return {
      pictLoading:true,
      addButton: 'hiddenButton',
      saveButton: 'hiddenButton',
      userDate:[],
      userInfo:{
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1
      },
      userInfoStyle: 'display:none',
    }
  },
  mounted() {
    let __this = this
    this.axios.get("device/listUserDevice ").then(function (response) {
      let result = response.data
      if(result.code=='200'){
        __this.userDate = result.result
        __this.pictLoading = false
      }
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods:{
    useradd(){
      if(this.saveButton == 'showButton'){
        this.saveButton = 'hiddenButton'
        this.userInfoReset()
      }
      this.userInfoStyle= "display:block;"
      this.addButton = 'showButton'
      this.userInfo.state = 1
      this.userInfo.gender = 1
      this.userInfo.role = 1
      this.userInfo.birthday = new Date("1971-01-01")
    },
    has(arr,num) {
      let bool = false; //默认不在数组中
      if(arr!=null && arr.length>0) {
        for (var i = 0, len = arr.length; i < len; i++) { //遍历数组的值
          if (arr[i] === num) {
            bool = true;  //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool; //返回bool
    },


    saveFormPost(userInfo){
      this.$refs.userInfo.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("person/editPerson", formData, config).then((res)=>{
            console.log(res.data.result);
            //this.reload()
            if(res.data.code == '200'){
              this.$message({
                message: '修改数据成功！',
                type: 'success',
                offset:'300'
              });
              this.userInfoReset()
            }
          })
        }else{
          this.$message({
                message: '数据验证失败',
                type: 'warring',
                offset:'300'
              });
        }
      })
    },
    userFormPost(userInfo){
      this.$refs.userInfo.validate((valid) => {
        if(valid){
          /* json格式提交： */
          let formData = JSON.stringify(this.userInfo);
          let config = {
            headers: {'Content-Type': 'application/json'}
          }
          this.axios.post("person/savePerson", formData, config).then((res)=>{
            console.log(res.data.result);
            //this.reload()
            if(res.data.code == '200'){
              this.$message({
                message: '添加数据成功！',
                type: 'success',
                offset:'300'
              });
              this.userInfoReset()
              this.userDate.unshift(res.data.result)
            }
          })
        }else{
          this.$message({
                message: '数据验证失败',
                type: 'warring',
                offset:'300'
              });
        }
      })
    },
    userInfoReset(){
      this.userInfo={
        birthday: new Date("1971-01-01"),
        cardNo: "",
        createTime: "",
        gender: 1,
        id: "",
        name: "",
        phone: "",
        role: 1,
        state: 1
      }
    },
    userFormCancle(){
      this.userInfoReset()
      this.userInfoStyle="display:none"
      this.addButton = 'hiddenButton'
      this.saveButton = 'hiddenButton'
    },
    editUser(index,row){
      if(this.addButton == 'showButton'){
        this.addButton = 'hiddenButton'
      }
      console.log(row.id)
      this.saveButton = 'showButton'
      this.userInfoStyle="display:block;"
      this.userInfo = JSON.parse(JSON.stringify(row))
      this.userInfo.birthday= new Date (row.birthday);//时间
    },
    deleteUser(index,row){
      this.userInfoStyle="display:none;"
      this.axios.get("person/deleteById?id="+row.id).then(function (response) {
        let result = response.data
        if(result.code=='200'){
          this.$message({
            message: '删除数据成功！',
            type: 'success',
            offset:'300'
          });
        }
      }).catch(function (error) {
        console.log(error)
      })
      this.userDate.splice(index,1)
    },
  },
  filters:{
    timestampToDate (cjsj,time=false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate() +1 < 10 ? '0'+(date.getDate() +1) : date.getDate() +1) + ' '
      if(time) {
        var h = (date.getHours() +1 < 10 ? '0'+(date.getHours() +1) : date.getHours() +1) + ':'
        var m = (date.getMinutes() +1 < 10 ? '0'+(date.getMinutes() +1) : date.getMinutes() +1) + ':'
        var s = (date.getSeconds() +1 < 10 ? '0'+(date.getSeconds() +1) : date.getSeconds() +1)
        return Y+M+D+h+m+s
      }else{
        return Y+M+D
      }
    },
    timestampToDate1 (cjsj,time=false) {
      var date = new Date(cjsj) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + '-'
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-'
      var D = (date.getDate()  < 10 ? '0'+(date.getDate() ) : date.getDate() ) + ' '
      var h = (date.getHours()  < 10 ? '0'+(date.getHours() ) : date.getHours() ) + ':'
      var m = (date.getMinutes()  < 10 ? '0'+(date.getMinutes() ) : date.getMinutes() ) + ':'
      var s = (date.getSeconds()  < 10 ? '0'+(date.getSeconds() ) : date.getSeconds() )
      return Y+M+D+h+m+s
    },
    hasWl(arr) {
      let bool = ''; //默认不在数组中
      if(arr!=null && arr.length>0) {
        for (var i = 0, len = arr.length; i < len; i++) { //遍历数组的值
          if (arr[i] == 1 || arr[i] == 2) {
            bool = '围栏告警';  //若存在某个值与改值相等，bool值为true
            break
          }
        }
      }
      return bool; //返回bool
    },
  }
}
</script>

<style scoped>
.user .user-style-body{
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-clip: border-box;
  border-width: 0;
  position: fixed;
  top: 80px;
  left: 1rem;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
  border-radius: 0.2rem;
  z-index: 999;
  height: 156px;
  background-color: #fff;
  width: 860px;
  padding: 2px;
}

.user .user-style-body .el-table__header tr,
.el-table__header th {
  padding: 0;
  height: 30px;
}
.user-style-body .el-table__body tr,
.el-table__body td {
  padding: 0;
  height: 30px;
}

.user-style-body .el-table__row td{
  background-color: rgba(233,243,252,1);
}
.user-style-body .el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: rgba(246,251,255,1);
}
.user-style-body .el-table--enable-row-hover .el-table__body tr:hover>td {
  background-color: #d3faef;
  color: #118b9c;
}

.user-style-body table tr:first-child th:first-child {
  border-top-left-radius: 4px;
}

.user-style-body table tr:first-child th:last-child {
  border-top-right-radius: 4px;
}
.user-style-body table tr:last-child td:first-child {
  border-bottom-left-radius: 4px;
}

.user-style-body table tr:last-child td:last-child {
  border-bottom-right-radius: 4px;
}

/*修改滚动条样式*/
div::-webkit-scrollbar{
  width:10px;
  height:10px;
  /**/
}
div::-webkit-scrollbar-track{
  background: rgb(239, 239, 239);
  border-radius:2px;
}
div::-webkit-scrollbar-thumb{
  background: #bfbfbf;
  border-radius:10px;
}
div::-webkit-scrollbar-thumb:hover{
  background: #1C7CD5;
}
div::-webkit-scrollbar-corner{
  background: #179a16;
}
.user-add{
  position: absolute;
  left: 770px;
  top: 84px;
  z-index: 9999;
}
.user-info-form{
    display: none;
    flex-direction: column;
    min-width: 0;
    background-color: #fff;
    word-wrap: break-word;
    background-clip: border-box;
    width: 180px;
    border-width: 0;
    border-radius: 0.4rem;
    box-shadow: 0 1px 1px 0 rgb(105, 106, 108);
    position: fixed;
    top: 80px;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px 10px;
    z-index: 200;
    height: 415px;
}

.user-info-for .el-input__inner{
  border-radius: 1px
}
.user-info-for .el-input--prefix .el-input__inner {
  padding-left: 10px;
}
.user-info-for .el-input__prefix{
  left: 145px;
}
.el-form-item__content{
  line-height: 20px;
  font-size: 12px;
}
.el-form-item__label{
  line-height: 22px;
  font-size: 12px;
}
.el-form-item {
    margin-bottom: 2px;
}
.showButton{
  display: block;
}
.hiddenButton{
  display: none;
}
.el-table{
  font-family: "Microsoft YaHei" ! important;
  font-size: 10px;
  font-weight: 500;
  color: #000;
}
.el-table td, .el-table th{
  padding: 3px 0;
}
.el-table-column--selection .cell{
  padding-left: 10px;
}
</style>
